﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="row" style="margin-top:20px;">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <span>用户列表</span>
                <div class="pull-right">
                    <button type="button" class="btn btn-xs btn-success" onclick="addUser();">新增用户</button>
                </div>
            </div>
            <div class="panel-body">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>性别</th>
                            <th class="text-center" style="width:150px">操作</th>
                        </tr>
                    </thead>
                    <tbody data-bind="template: { name: 'userTemplate', foreach: UserList }"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" data-bind="with: CurrentUser">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">用户信息</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>姓名：</label>
                    <input type="text" class="form-control" placeholder="姓名" data-bind="textInput:UserName">
                </div>
                <div class="form-group">
                    <label>年龄：</label>
                    <input type="text" class="form-control" placeholder="年龄" data-bind="textInput:Age">
                </div>
                <div class="form-group">
                    <label>性别：</label>
                    <select class="form-control" data-bind="value:Sex">
                        <option value="0">未知</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bind="click: SaveUser">保存</button>
                <button type="button" class="btn btn-default" data-bind="click: CloseDialog">关闭</button>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/html" id="userTemplate">
        <tr>
            <td data-bind="text:UserName"></td>
            <td data-bind="text:Age"></td>
            <td>
                <!-- ko if: Sex() == '0' -->
                <span>未知</span>
                <!-- /ko -->
                <!-- ko if: Sex() == '1' -->
                <span>男</span>
                <!-- /ko -->
                <!-- ko if: Sex() == '2' -->
                <span>女</span>
                <!-- /ko -->
            </td>
            <td class="text-center">
                <button class="btn btn-xs btn-primary" data-bind="click: EditUser">编辑</button>
                <button class="btn btn-xs btn-danger" data-bind="click: DeleteUser">删除</button>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
        var tempUser;
        var mViewModel;
        var ViewModel = function () {
            var self = this;
            self.CurrentUser = ko.observable(new UserModel());
            self.UserList = ko.observableArray();
        };
        var UserModel = function () {
            var self = this;
            self.Id = ko.observable("");
            self.UserName = ko.observable("");
            self.Age = ko.observable("");
            self.Sex = ko.observable("0");
            self.SaveUser = function () {
                if (self.Id() == "") {
                    $.ajax({
                        url: "/Home/AddUser",
                        data: { UserName: self.UserName(), Age: self.Age(), Sex: self.Sex() },
                        type: "post",
                        dataType: "text",
                        success: function (data) {
                            self.Id(data);
                            mViewModel.UserList.push(self);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert(textStatus, { icon: 0 });
                        }
                    });
                } else {
                    $.ajax({
                        url: "/Home/UpdateUser",
                        data: { Id: self.Id(), UserName: self.UserName(), Age: self.Age(), Sex: self.Sex() },
                        type: "post",
                        dataType: "text",
                        success: function (data) {},
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert(textStatus, { icon: 0 });
                        }
                    });
                }
                $('#userModal').modal('hide');
            };
            self.EditUser = function () {
                tempUser = ko.toJS(self);
                mViewModel.CurrentUser(self);
                $('#userModal').modal();
            };
            self.DeleteUser = function () {
                layer.confirm('您确定要删除该用户吗？', { icon: 3, title: '系统提示' }, function (index) {
                    $.ajax({
                        url: "/Home/DeleteUser",
                        data: { userId: self.Id() },
                        type: "post",
                        dataType: "text",
                        success: function (data) {
                            if (data == "ok") {
                                mViewModel.UserList.remove(self);
                                $('#userModal').modal('hide');
                                layer.closeAll();
                            } else {
                                layer.alert("删除失败，请重试。", { icon: 0 });
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            layer.alert(textStatus, { icon: 0 });
                        }
                    });
                });
            };
            self.CloseDialog = function () {
                self.UserName(tempUser.UserName);
                self.Age(tempUser.Age);
                self.Sex(tempUser.Sex);
                $('#userModal').modal('hide');
            };
        }
        function getUserList() {
            var loadIndex = layer.load(1, { shade: [0.3, '#000'] });
            $.ajax({
                url: "/Home/GetUserList",
                type: "get",
                dataType: "json",
                success: function (data) {
                    layer.close(loadIndex);
                    $.each(data,function (index, item) {
                        var userInfo = new UserModel();
                        userInfo.Id(item.Id);
                        userInfo.UserName(item.UserName);
                        userInfo.Age(item.Age);
                        userInfo.Sex(item.Sex);
                        mViewModel.UserList.push(userInfo);
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(loadIndex);
                    layer.alert(textStatus, { icon: 0 });
                }
            });
        }
        function addUser() {
            var user = new UserModel();
            tempUser = ko.toJS(user);
            mViewModel.CurrentUser(user);
            $('#userModal').modal();
        }

        $(document).ready(function () {
            mViewModel = new ViewModel();
            ko.applyBindings(mViewModel);
            getUserList();
        });
    </script>
}
